<template>
  <div>
    <div class="main">
      <div class="left">
        <div class="title">
          <span></span>客户渠道分布总览饼图
        </div>
        <div class="chartOne"></div>
      </div>
      <div class="right">
        <div class="title">
          <span></span>跟进类型分布总览饼图
        </div>
        <div class="chartTwo"></div>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="title trend">
          <div class="biao"><span></span>新增用户月趋势</div>
          <div class="lastYear">
            <el-radio-group v-model="timeType" @change="getEchartsThree">
              <el-radio label="3">近一年</el-radio>
              <el-radio label="2">近半年</el-radio>
              <el-radio label="1">近3个月</el-radio>
              <el-radio label="0">近一个月</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="chartThree"></div>
      </div>
      <div class="right">
        <div class="title trend">
          <div class="biao"><span></span>平台获客排名（TOP6）</div>
          <div class="lastYear">
            <el-date-picker v-model="month" type="month" placeholder="选择月" value-format="yyyy-MM" @change="getEchartsFour" :picker-options="pickerOptions"></el-date-picker>
          </div>
        </div>
        <div class="showColorTitle">
          <div>
            <div class="colorBoxTitle" style="background-color:#2ADEDC"></div>
            <span style="font-size: 12px">团险</span>
          </div>
          <div>
            <div class="colorBoxTitle" style="background-color:#6AB5FC"></div>
            <span style="font-size: 12px">个险</span>
          </div>
          <div>
            <div class="colorBoxTitle" style="background-color:#FFAD3A"></div>
            <span style="font-size: 12px">创新</span>
          </div>
          <div>
            <div class="colorBoxTitle" style="background-color:#14D595"></div>
            <span style="font-size: 12px">银保</span>
          </div>
        </div>
        <div class="chartFour"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCusAddMonthData, getCusChannelData, getCusSourceData, getFollowWayData } from '@/api/customer/listHome'
import { parseTime } from '@/utils/common'
import * as echarts from 'echarts'

export default {
  props: {
    form: String
  },
  watch: {
    form: {
      handler(newValue) {
        this.sonForm = JSON.parse(newValue)
        this.getEchartsOne()
        this.getEchartsTwo()
        this.getEchartsThree()
        this.getEchartsFour()
      },
      immediate: true
    }
  },
  data() {
    return {
      timeType: '0',
      month: '',
      sonForm: '',
      myChartThree: '',
      myChartFour: '',
      countColorList: {
        '创新': '#FFAD3A',
        '团险': '#2ADEDC',
        '个险': '#6AB5FC',
        '银保': '#14D595'
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  methods: {
    async getEchartsOne() {
      let data
      try {
        let cusChannelData = await getCusChannelData(this.sonForm)
        if (cusChannelData.code === 200) {
          data = cusChannelData.data
        }else {
          data = [
            {
              "name": "个险",
              "value": 0,
              "count": 0
            },
            {
              "name": "团险",
              "value": 0,
              "count": 0
            },
            {
              "name": "创新",
              "value": 0,
              "count": 0
            },
            {
              "name": "银保",
              "value": 0,
              "count": 0
            }
          ]
        }
      } catch (error) {
        data = [
          {
            "name": "个险",
            "value": 0,
            "count": 0
          },
          {
            "name": "团险",
            "value": 0,
            "count": 0
          },
          {
            "name": "创新",
            "value": 0,
            "count": 0
          },
          {
            "name": "银保",
            "value": 0,
            "count": 0
          }
        ]
      }

      let myChart = echarts.init(document.querySelector('.chartOne'))
      let options = {
        title: {
          text: '客户渠道',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: function(params) {
            let loading =
              params.data.name + '\n\n' + params.data.count
            return loading
          }
        },
        legend: {
          top: 'center',
          left: '80%',
          orient: 'vertical'
        },
        color: ['#FFAB96', '#FFAD3A', '#FFDA8C', '#082aff'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: true,
              formatter: `{b}:{c}% \n\n`,
              padding: [0, -60],
              textStyle: {
                color: ['#FFAB96', '#FFAD3A', '#FFDA8C', '#082aff']
              }
            },
            labelLine: {
              show: true,
              showAbove: true,
              length2: '60',
              length: 20
            },
            data
          }
        ]
      }
      myChart.setOption(options)
    },
    async getEchartsTwo() {
      let data
      try {
        let followWayData = await getFollowWayData(this.sonForm)
        if (followWayData.code === 200) {
          data = followWayData.data
        }
      } catch (error) {
        data = []
      }

      let myChart = echarts.init(document.querySelector('.chartTwo'))
      let options = {
        title: {
          text: '跟进类型',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: function(params) {
            let loading =
              params.data.name + '\n\n' + params.data.count
            return loading
          }
        },
        legend: {
          top: 'center',
          left: '80%',
          orient: 'vertical'
        },
        color: ['#FFAB96', '#FFAD3A', '#FFDA8C', '#082aff', '#F4EBEB', '#FFBC5F'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: true,
              formatter: `{b}:{c}% \n\n`,
              padding: [0, -60],
              textStyle: {
                color: '#082aff'
              }
            },
            labelLine: {
              show: true,
              showAbove: true,
              length2: '60',
              length: 20
            },
            data
          }
        ]
      }
      myChart.setOption(options)
    },
    async getEchartsThree() {
      let timeData, averageData, bankInsuranceData, innovateInsuranceData, personalInsuranceData
      try {
        let cusAddMonthData = await getCusAddMonthData({ ...this.sonForm, timeType: this.timeType })
        if (cusAddMonthData.code === 200) {
          const res = cusAddMonthData.data.sort((a, b) => {
            return a.time > b.time ? 1 : -1
          })
          timeData = res.map(item => item.time) || []
          averageData = res.map(item => item.average) || []
          bankInsuranceData = res.map(item => item.bankInsurance) || []
          innovateInsuranceData = res.map(item => item.innovateInsurance) || []
          personalInsuranceData = res.map(item => item.personalInsurance) || []
        }
      } catch (error) {
        timeData = []
        averageData = []
        bankInsuranceData = []
        innovateInsuranceData = []
        personalInsuranceData = []
      }

      if (!this.myChartThree) {
        this.myChartThree = echarts.init(document.querySelector('.chartThree'))
      }
      let options = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['创新', '银保', '个险', '均值'],
          right: 20,
          icon: 'circle'
        },
        color: ['#FFAD3A', '#6AB5FC', '#14D595', '#082aff'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: timeData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '创新',
            type: 'line',
            smooth: true,
            data: innovateInsuranceData
          },
          {
            name: '银保',
            type: 'line',
            smooth: true,
            data: bankInsuranceData
          },
          {
            name: '个险',
            type: 'line',
            smooth: true,
            data: personalInsuranceData
          },
          {
            name: '均值',
            type: 'line',
            smooth: true,
            data: averageData
          }
        ]
      }

      this.myChartThree.setOption(options)
    },
    async getEchartsFour() {
      let sourceData, countData
      try {
        let cusSourceData = await getCusSourceData({
          ...this.sonForm,
          time: this.month || parseTime(new Date(), '{y}-{m}')
        })
        if (cusSourceData.code === 200) {
          const data = cusSourceData.data
          sourceData = data.map(item => item.customerSourceName) || []
          countData = data.map(item => {
            return {
              value: item.count,
              itemStyle:
                {
                  color: this.countColorList[item.insuranceType]
                }
            }
          }) || []
          sourceData = sourceData.indexOf(null) != -1 ? sourceData.slice(0, sourceData.length - 1) : sourceData
          sourceData = sourceData.length > 6 ? sourceData.slice(0, 6) : sourceData
        }
      } catch (error) {
        sourceData = []
        countData = []
      }

      if (!this.myChartFour) {
        this.myChartFour = echarts.init(document.querySelector('.chartFour'))
      }
      let options = {
        color: '#082aff',
        legend: {
          right: 20,
          icon: 'circle'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: sourceData
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          // show: true,
          formatter: `{b}:{c} \n\n`
        },
        series: [
          {
            // name: '平台',
            data: countData,
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              borderRadius: 15
            }
          }
        ]
      }
      this.myChartFour.setOption(options)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  margin-top: 17px;
  display: flex;
  height: 330px;
  .left {
    width: 50%;
    margin-right: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .right {
    width: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .chartOne, .chartTwo, .chartThree, .chartFour {
    flex: 1;
  }
}
.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #393B44;
  padding: 20px 0;
  span {
    width: 3px;
    height: 21px;
    background: #082aff;
    margin-right: 21px;
  }
}

.trend {
  justify-content: space-between;

  .biao {
    display: flex;
  }

  .lastYear {
    font-size: 14px;
    ::v-deep .el-radio-group {
      .el-radio {
        margin-right: 20px;

        .el-radio__input {
          display: none;
        }

        .el-radio__label {
          padding-left: 20px;
          border-left: 1px solid #ccc;
        }
      }

      .el-radio:first-child {
        .el-radio__label {
          border-left: 0;
        }
      }
    }

  }
}

.showColorTitle {
  display: flex;
  flex-direction: row-reverse;
  margin: 8px 0 0 10px;

  div {
    padding: 2px;
    margin-right: 14px;
    display: flex;

    .colorBoxTitle {
      width: 26px;
      height: 14px;
      border-radius: 4px;
      margin-right: 4px;
    }
  }
}
</style>
